<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<style>
			.tab_box{
				border: 1px solid coral;
				width: 20%;
				height: 24px;
				overflow: hidden;
				padding: 0;
			
			}
			.tab_box ul li{
				display: none;
			}
		.tab_menu ul li{  
        list-style-type: none;  
        display:inline-block;  
        border-left: 0.05rem solid #ccc;  
        text-align: center;  
        cursor: pointer;
    }  
    li{
    	list-style: none;
    	overflow: hidden;
    }
    ul{

    	margin: 0;
    }
    .selected{
    	background: red;
    }
		</style>
	</head>
	<body>
		<div class="tab">
		<div class="tab_menu" >
			<ul>
				<li class="selected">时事</li>
				<li>体育</li>
				<li>娱乐</li>
			</ul>
		</div>
		<div class="tab_box">
			<ul>
				<li style="display: block;">我是第一个内容</li>
				<li >体育</li>
				<li>娱乐</li>
			</ul>
			
		</div>
		</div>
		<script>
			$(".tab_menu ul li").hover(function(){
				$(this).addClass("selected").siblings().removeClass("selected");
				var _index = $(this).index();
				$(".tab_box ul li").eq(_index).show().siblings().hide();
			})
		</script>
	</body>
</html>
